import React from 'react';
import { Swiper, SwiperItem, Image, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import Search from '@/components/common/Search';
import ToolsTitle from "@/components/index/ToolsTitle";
import bg_1 from '@/assets/public/bg-1.jpg';
import bg_2 from '@/assets/public/bg-2.jpg';
import bg_3 from '@/assets/public/bg-3.jpg';

export default function Component() {
  const onToProducts = () => {
    Taro.switchTab({ url: '/pages/products/index' });
  }
  return (
    <View className="w-full h-auto relative">
      <Swiper onClick={onToProducts} className='aspect-1/1 w-full h-auto' indicatorColor='#999' indicatorActiveColor='#333' circular autoplay interval={3000}>
        <SwiperItem className='w-full h-auto'><Image className='w-full h-full object-cover' src={bg_1} /> </SwiperItem>
        <SwiperItem className='w-full h-auto'><Image className='w-full h-full object-cover' src={bg_2} /></SwiperItem>
        <SwiperItem className='w-full h-auto'><Image className='w-full h-full object-cover' src={bg_3} /></SwiperItem>
      </Swiper>
      <Search className="absolute top-[80px] left-0 z-1"/>
      <ToolsTitle className="absolute bottom-0 left-1/50 w-96/100 z-1"/>
    </View>
  )
}
